<div class="well table-search">
    <form class="form-horizontal">
        <div class="form-body clearfix">
            <div class="form-group col-xs-4">
                <label class="col-xs-3 control-label">姓名</label>
                <div class="col-xs-9">
                    <input type="text" class="form-control" name="realname" />
                </div>
            </div>
            <div class="form-group col-xs-4">
                <label class="col-xs-3 control-label">手机号</label>
                <div class="col-xs-9">
                    <input type="text" class="form-control" name="mobile" />
                </div>
            </div>
            <div class="form-group col-xs-4">
                <label class="col-xs-3 control-label">用户组</label>
                <div class="col-xs-9">
                    <select name="role_id" class="form-control">
                        <option value="">--不限--</option>
                        <?php foreach($roles as $k=>$v):?>
                        <option value="<?= $k?>"><?= $v?></option>
                        <?php endforeach;?>
                    </select>
                </div>
            </div>
            <div class="form-group col-xs-4">
                <label class="col-xs-3 control-label">状态</label>
                <div class="col-xs-9">
                    <select name="status" class="form-control">
                        <option value="">--不限--</option>
                        <option value="1">启用</option>
                        <option value="2">禁用</option>
                    </select>
                </div>
            </div>
            <div class="form-group col-xs-4">
                <label class="col-xs-3 control-label">入职时间</label>
                <div class="col-xs-9">
                    <div class="input-daterange input-group">
                        <input type="text" class="form-control date-picker" name="join_at_min" />
                        <span class="input-group-addon">
                            <i class="fa fa-exchange"></i>
                        </span>
                        <input type="text" class="form-control date-picker" name="join_at_max" />
                    </div>
                </div>
            </div>
            <div class="form-group col-xs-4">
                <label class="col-xs-3 control-label">创建时间</label>
                <div class="col-xs-9">
                    <div class="input-daterange input-group">
                        <input type="text" class="form-control date-picker" name="created_at_min" />
                        <span class="input-group-addon">
                            <i class="fa fa-exchange"></i>
                        </span>
                        <input type="text" class="form-control date-picker" name="created_at_max" />
                    </div>
                </div>
            </div>
        </div>
        <div class="form-footer">
            <button class="btn btn-success btn-sm" onclick="refreshTable()"><i class="fa fa-search"></i> 搜索</button>
            <button class="btn btn-sm"><i class="fa fa-undo"></i> 重置</button>
        </div>
    </form>
</div>
<div id="toolbar">
    <a class="btn btn-info btn-white save-item" url="add"><i class="ace-icon fa fa-plus"></i>新增</a>
</div>
<table id="list-container"></table>
<?php $this->beginBlock('js') ?>
<script type="text/javascript">
    var urls = {
        index: 'index',
        disable: 'disable',
        enable: 'enable',
        add: 'add',
        edit: 'edit'
    }
    var tableContainer = $('#list-container')
    var tableSearchForm = '.table-search form'
    initTable()
    function refreshTable() {
        tableContainer.bootstrapTable('refresh', {
            query: ace.form.serialize(tableSearchForm)
        })
    }
    function initTable () {
        tableContainer.bootstrapTable('destroy');
        var columns = [
            {title: 'ID', field: 'id'},
            {title: '真实姓名', field: 'realname'},
            {title: '用户组', field: 'role_name'},
            {title: '手机号', field: 'mobile'},
            {title: '入职时间', field: 'join_at'},
            {title: '状态', field: 'status', formatter: function(value, row, index){
                if (value == 1)
                    return '<span class="badge badge-success">启用</span>'
                else
                    return '<span class="badge badge-grey">禁用</span>'
            }},
            {title: '最后修改时间', field: 'updated_at'},
            {title: '操作', cellStyle: {
                    css: {'max-width': '240px'},
                },class: 'actions', formatter: function(value, row, index) {
                    var html = '';
                    if (row.status==1) {
                        html += '<a action="disable" url="'+urls.disable+'">禁用</a>'
                    } else {
                        html += '<a action="enable" url="'+urls.enable+'">启用</a>'
                    }
                    html += '<a class="save-item" url="'+urls.edit+'">编辑</a>';
                    html += '<a action="remove" url="'+urls.remove+'">删除</a>';
                    return html;
                }}
        ]
        tableContainer.bootstrapTable({
            url: urls.index,
            uniqueId: "id",
            striped: true,
            toolbar: '#toolbar',
            pagination: true,
            sidePagination: "server",
            pageSize: 20,
            pageList: [10, 20, 50, 100],
            columns: columns,
            queryParams: function (params) {
                return $.extend({}, params, ace.form.serialize(tableSearchForm))
            }
        });
    }
</script>
<?php $this->endBlock() ?>
